<?php
include ("header.php");

?>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var markerArray = [];
var vResultsFrom = 0;
$(document).ready(function() {
	loadList();
});
function loadList()
{
	// load the list
    $.post("pickup_map_functions.php",{    
        action : "1",
        resultsFrom : vResultsFrom
      }, function(xml) {    
	$("#pickuplist").html(xml);   
  });    
    $.post("pickup_map_functions.php",{    
        action : "2",
        resultsFrom : vResultsFrom   
      }, function(xml) {    
	$("#test").html(xml);
	placeMarkers();   
  });
}
function placeMarkers()
{
	markerArray = [];
    // google maps stuff
    var latlng = new google.maps.LatLng(33.6476, -117.8428);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    
	var numOfResults = $('p#numOfResults').html()
	var infowindow = new google.maps.InfoWindow({
		    content: "temp"
		});

	for (i = 0; i < numOfResults; i++)
	{
		var lat = $('#lat'+i).html();
		var lng = $('#lng'+i).html();
		var id = $('#id'+i).html();
		var latlng = new google.maps.LatLng(lat, lng);

		var marker = new google.maps.Marker({
		      position: latlng, 
		      map: map, 
		      title:"Hello World!"
		  });

		
		marker.html = $('#contact'+i).html();
		
		google.maps.event.addListener(marker, 'click', function() {
			  infowindow.setContent(this.html);
			  infowindow.open(map, this);
			}); 
		markerArray.push(marker);
	}
}
function openWindow(i)
{
	google.maps.event.trigger(markerArray[i],'click');
}
function previous()
{
	vResultsFrom = vResultsFrom - 10;
	loadList();
}
function next()
{
	vResultsFrom = vResultsFrom + 10;
	loadList();
}
function reserve_pickup(vId)
{
	$.post("pickup_map_functions.php",{    
        action : "3",
        id : vId   
      },function() {
		window.location.reload();
  });
}
</script>
<div style="background:#FFFFFF; position:relative;">
	<div style="display: inline;position:realtive">
		<div style="float: left; position:relative;">
			<div id="pickuplist"></div>
			<span><input type="button" onclick="previous()" value="previous" style="float:left"/></span>
			<span><input type="button" onclick="next()" value="next" style="float:right"/></span>
		</div>
		
		<div id="map_canvas" style="width: 50%; height: 50%;"></div>
	</div>
</div>
<div id="footer">
</div>
</div>
</div>
<div id="test" class="hidden" style="font-size:1px;"></div>
</body>
</html>

